import React from 'react'

import './couponItem.less'

export default class CouponItem extends React.Component{
    render(){
        let {item} = this.props;
        return(
            <div className={`couponItem ${item.hasPass && !item.hasUsed ? "active" : null}`}>
                <div>
                    <div className="couponItemLeft">
                        <div className="img" style={{backgroundImage:`url(${item.productImage || ""})`}}></div>
                        <span>
                            <div>
                                <h4>{item.type === "VOUCHERS" ? "￥" : null} <span className="Num">{item.type === "VOUCHERS"? item.faceValue : item.discount}</span> {item.type === "VOUCHERS" ? null :"折"}</h4>
                                <p>满{item.fullUse}可用</p>
                            </div>
                            <span>
                                <p>{item.name}</p>
                                <p>{item.date}</p>
                            </span>
                    </span>
                    </div>
                    {!item.hasUsed && !item.hasPass ?
                        <div className="couponItemRightBtn">
                            <a>
                                <span>立即使用</span>
                            </a>
                        </div> :
                        <div className="couponItemRightLabel">
                            <label >已过期</label>
                        </div>
                    }
                </div>
                <label>
                    <span style={item.type === "VOUCHERS" ?
                                {backgroundColor:"#fc2572"} :
                                {backgroundColor:"#19d2cc"}}> </span>
                    <p>{item.type == "VOUCHERS" ? "抵用券" : "折扣券"}</p>
                </label>
            </div>
        )
    }
}